<template>
  <div class="container" style="padding: 10px">
    <el-card shadow="never">
      <el-form label-width="80px" :model="formData">
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col :span="7">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                style="width: 100%"
                placeholder="根据编号搜索"
                v-model="formData.keyword"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <div class="button">
                <el-button size="small" @click="hEmpty">清除</el-button>
                <el-button type="primary" size="small" @click="hSearch"
                  >搜索</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- end -->
      <!-- 数据列表 -->
      <el-table
        :data="list"
        style="margin-top: 10px"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column label="编号" prop="id" />
        <el-table-column label="题型" width="80px">
          <template #default="{ row }">
            {{ questionType(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题目编号">
          <template #default="{ row }">
            <el-link
              v-for="item in row.questionIDs"
              :key="item.number"
              :underline="false"
              type="primary"
              @click="linkClick(item.id)"
            >
              {{ item.number }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="录入日期" prop="addTime" />
        <el-table-column label="答题时间(s)" prop="totalSeconds" />
        <el-table-column label="正确率" prop="accuracyRate" />
        <el-table-column label="录入人" prop="userName" />
        <el-table-column label="操作" width="150px">
          <template #default="{ row }">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              @click="hDel(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" align="middle" style="height: 60px; float: right">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formData.pagesize"
          :total="total"
        >
        </el-pagination>
      </el-row>
      <!-- 新增目录弹层 -->
      <el-Dialog
        title="题目预览"
        :visible.sync="showPreview"
        v-if="showPreview"
      >
        <questionsPreview :id="PreviewId" />
        <span
          slot="footer"
          class="dialog-footer"
          style="display: flex; justify-content: end"
        >
          <el-button type="primary" @click="showPreview = false"
            >关 闭</el-button
          >
        </span>
      </el-Dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js';
import { questionType } from '@/api/hmmm/constants.js';
import questionsPreview from '@/module-hmmm/components/questions-randoms';
// 题型枚举
const hireType = {};
questionType.map((item) => {
  hireType[item.value] = item.label;
});
export default {
  components: { questionsPreview },
  data() {
    return {
      showPreview: false,
      list: [],
      formData: {
        // 关键字
        keyword: null,
        page: 1,
        pagesize: 10,
      },
      alertText: '',
      total: 0,
      PreviewId: '',
    };
  },

  methods: {
    // 获取组题列表
    async loadRandoms() {
      try {
        const res = await randoms(this.formData);
        console.log(res);
        // 获取总条数
        this.total = res.data.counts;
        this.alertText = `共 ${this.total} 条记录`;
        this.list = res.data.items;
      } catch (error) {
        console.log(error);
      }
    },
     handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.formData.page = 1
      this.formData.pagesize = val
      this.loadRandoms()
    },
     handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.formData.page = val
      this.loadRandoms()
    },
     // 题型枚举
    questionType (data) {
      // return questionType.find(item => item.value === data).label
      return hireType[data]
    },
     // 搜素
    async hSearch () {
       try {
        const res = await randoms({keyword: this.formData.keyword})
        console.log(res)
        // 获取总条数
        this.total = res.data.counts
        this.alertText = `共 ${this.total} 条记录`
        this.list = res.data.items
      } catch (error) {
        console.log(error)
      }
    },
    // 清空
    hEmpty () {
      this.formData = {}
      this.loadRandoms()
    },
    // 删除
    hDel (id) {
      this.$confirm('此操作将永久删除该列表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
          const res = await removeRandoms({ id })
          console.log('删除列表', res)
          if (this.list.length === 1) {
            this.formData.page--
            if (this.formData.page <= 0) {
              this.formData.page = 1
            }
          }
          this.loadRandoms()
          this.$message({
          type: 'success',
          message: '删除成功!'
        })
        })
        .catch(err=>console.log(err))
    },
    linkClick (id) {
      this.showPreview = true
      this.PreviewId = Number(id)
    }
  },
  created () {
    this.loadRandoms()
  }
};
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  justify-content: end;
}
</style>